Understanding Adaptive Document Canvas

Let us take a quick overview of the various elements of the Adaptive Document Canvas. Before we describe the same, it is important to note that Adaptive Documents provides the feature to open more than one forms simultaneously. However, only one of these open forms remain active with its components visible on the canvas.

With this background, let us take a look at the various elements of the Adaptive Form Canvas.

The above image labels various constituents on the canvas. Please find below brief description of these constituents in the same order:

1. The file menu gives you option to open an existing form or create a new form. Opening / creating a form adds it to the workspace section (defined in 2). You can also save, delete or clone forms using the file menu.

2. This area holds the title for all the open forms. We can refer to this as the Workspace section. You can click on any of the title to make it active.

3. This is the title of active form. The system highlights the same with a light blue colour and a tick mark indicating that it is the active form. It is important to note that there can be one and only one active form in the workspace section.

Please note

You can close an active form by clicking on the "X" icon present at the right end of the active form. Closing a form removes it from the workspace section. To close a form, you need to make it active by clicking on it once.

4. Clicking on this icon brings you to the Edit mode of the active form. You can create or modify the elements of the active form, when in Edit mode.

5. Clicking on this icon brings you to the Preview page depicting how the form may appear outside designer canvas.

Please note

You can toggle between Edit and Preview mode by clicking on respective icons. One and only one of these two modes will be in-action for the active form. The other will remain passive till clicked.

The passive mode will appear in blue, while the in-action mode will appear in white.

In the above image, the active form - Marketing Request is in Edit mode (icon appears in white).

6. This arrow icon can be used to toggle the appearance of Workspace section. Users may want to toggle off (collapse) the Workspace section typically when the Form Structure is too long.

7. There are two tabs here - Elements and Overview. When Elements tab is active, then you can see the tree of elements for the form (defined in 8). When overview tab is active, then you can see and modify information about the form - like the form title, states, connections, etc.

8. This is the section which appears when the Elements tab is active (defined in 7). You can see the tree structure of elements for the active form. We can refer this as the Adaptive Document structure panel or the Tree of Elements section. This section houses all the elements added to the form. The structure may have elements nested within each other based on your desired configuration. You can scroll up and down to view all the components of the structure. You can click on any of the structural elements to view it on the Composition area (defined in 9).

9. This is the Composition area. Here you can add elements and also perceive how various elements will appear visually. Please note this is different from Preview.

10. This is the selected element. It appears with a blue highlight. The attributes of the selected element are visible towards the right in the Element configuration panel (defined in 11).

11. This is the Element configuration panel. Depending on the nature of the element, this panel will display different configuration categories.

12. These are the configuration categories, which include:

a. Attributes - to define the appearance parameters of the element on the form.

b. Conditions - to define logic which governs conditions when the element can be enabled, or appear etc.

c. Validation - to set element level validation criteria. When the criteria is met, the element will be considered valid, else invalid.

d. Connection - to define the connection of the element with data table's column.

e. Event - To define what actions can be triggered upon click of the element (please note this option is applicable for button elements only.)

f. Choice - To define the choices that will appear in a dropdown element. (please note this option is applicable for choice type elements.)

Based on the nature of the elements selected, configuration categories will appear in the Element configuration panel (defined in 11).

13. This is the button to toggle between the dark and light mode appearance.